<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="../css/materialdesignicons.min.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../js/jqTable/css/jqTable.css">
  <link rel="stylesheet" type="text/css" href="../css/style.min.css">
  <style>
    .p20 {
      padding: 20px;
    }

    .mt20 {
      margin-top: 20px;
    }

    .mr10 {
      margin-right: 10px;
    }

    .hide {
      display: none;
    }
  </style>
</head>

<body style="padding-left:9px;">
  <div class="p20">
    <div class="J-table-main">
      <h4 class="mt20">表格1:左右固定，高度限制，宽度全部固定--5秒后更新高度为300，8秒后更新数据</h4>
      <div class="c-table J-table-height">
        <table cellspacing="0" cellpadding="0" border="0" role="c-table" data-height="200">
          <colgroup>
            <col name="" width="150">
            <col name="" width="120">
            <col name="" width="120">
            <col name="" width="120">
            <col name="" width="300">
            <col name="" width="300">
            <col name="" width="140">
          </colgroup>
          <thead>
            <tr>
              <th class="">
                <div class="cell">日期</div>
              </th>
              <th class="">
                <div class="cell">姓名</div>
              </th>
              <th class="">
                <div class="cell">省份</div>
              </th>
              <th class="">
                <div class="cell">市区</div>
              </th>
              <th class="">
                <div class="cell">地址</div>
              </th>
              <th class="">
                <div class="cell">邮编</div>
              </th>
              <th class="">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="cE1F6F1">
              <td class="">
                <div class="cell">2016-05-03</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="cCCD8FF">
              <td class="">
                <div class="cell">2016-05-02</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="cE1F6F1">
              <td class="">
                <div class="cell">2016-05-04</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="cCCD8FF">
              <td class="">
                <div class="cell">2016-05-01</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="cE1F6F1">
              <td class="">
                <div class="cell">2016-05-08</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="cCCD8FF">
              <td class="">
                <div class="cell">2016-05-06</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="cE1F6F1">
              <td class="">
                <div class="cell">2016-05-07</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <br>
      <h4>固定多列</h4>
      <div class="c-table c-table--noWrap c-table--fit">
        <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table1" data-height="200">
          <colgroup>
            <col name="" width="150">
            <col name="" width="">
            <col name="" width="120">
            <col name="" width="">
            <col name="" width="450">
            <col name="" width="">
            <col name="" width="140">
          </colgroup>
          <thead>
            <tr>
              <th colspan="1" rowspan="1" class="">
                <div class="cell">日期</div>
              </th>
              <th colspan="1" rowspan="1" class="">
                <div class="cell">姓名</div>
              </th>
              <th colspan="1" rowspan="1" class="">
                <div class="cell">省份</div>
              </th>
              <th colspan="1" rowspan="1" class="">
                <div class="cell">市区</div>
              </th>
              <th colspan="1" rowspan="1" class="">
                <div class="cell">地址</div>
              </th>
              <th colspan="1" rowspan="1" class="">
                <div class="cell">邮编</div>
              </th>
              <th colspan="1" rowspan="1" class="">
                <div class="cell">操作</div>
              </th </tr>
          </thead>
          <tbody>
            <tr class="c-table__row">
              <td class="">
                <div class="cell">2016-05-03</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="c-table__row">
              <td class="">
                <div class="cell">2016-05-02</div>
              </td>
              <td class="">
                <div class="cell">王小虎测试测试测试测试宽度</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="c-table__row">
              <td class="">
                <div class="cell">2016-05-04</div>
              </td>
              <td class="">
                <div class="cell">王小虎dvgdfsdfdsfdfdfdfdsf</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="c-table__row">
              <td class="">
                <div class="cell">2016-05-01</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="c-table__row">
              <td class="">
                <div class="cell">2016-05-08</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="c-table__row">
              <td class="">
                <div class="cell">2016-05-06</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
            <tr class="c-table__row">
              <td class="">
                <div class="cell">2016-05-07</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <br>
      <h4>表格2:动态表格，有二级,可展开收起（icon替换为iconfont,可自行选择修改为圆形加减号或方形，或保持箭头，可打开fonts/iconfont/demo_fontclass.html查看）</h4>
      <div class="c-table J-table c-table--noWrap g-toggleTable--main" data-level="true">

      </div>

      <br>
      <h4>表格3:强制不换行，当位置不够显示时，超出500（最大宽度，设置参数为fixedMaxWidth:500）的列宽度设为500，超出隐藏</h4>
      <div class="c-table c-table--border c-table--noWrap">
        <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table2">
          <colgroup>
            <col name="" width="150">
            <col name="" width="120">
            <col name="" width="120">
            <col name="" width="120">
            <col name="" width="">
            <col name="" width="">
            <col name="" width="140">
          </colgroup>
          <thead>
            <tr>
              <th class="">
                <div class="cell">日期</div>
              </th>
              <th class="">
                <div class="cell">姓名</div>
              </th>
              <th class="">
                <div class="cell">省份</div>
              </th>
              <th class="">
                <div class="cell">市区</div>
              </th>
              <th class="">
                <div class="cell">地址</div>
              </th>
              <th class="">
                <div class="cell">邮编</div>
              </th>
              <th class="">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="">
                <div class="cell">2016-05-03</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-02</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-04</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-01</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-08</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-06</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-07</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
      <br>
      <h4>表格4:只有右边固定</h4>
      <div class="c-table c-table--border">
        <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table2">
          <colgroup>
            <col name="" width="150">
            <col name="" width="120">
            <col name="" width="120">
            <col name="" width="120">
            <col name="" width="">
            <col name="" width="">
            <col name="" width="140">
          </colgroup>
          <thead>
            <tr>
              <th class="">
                <div class="cell">日期</div>
              </th>
              <th class="">
                <div class="cell">姓名</div>
              </th>
              <th class="">
                <div class="cell">省份</div>
              </th>
              <th class="">
                <div class="cell">市区</div>
              </th>
              <th class="">
                <div class="cell">地址</div>
              </th>
              <th class="">
                <div class="cell">邮编</div>
              </th>
              <th class="">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="">
                <div class="cell">2016-05-03</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-02</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-04</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-01</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-08</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-06</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-07</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
      <br>
      <h4>表格5:条纹</h4>
      <div class="c-table c-table--border c-table--striped">
        <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table">
          <colgroup>
            <col name="" width="150">
            <col name="" width="120">
            <col name="" width="120">
            <col name="" width="200">
            <col name="" width="">
            <col name="" width="">
            <col name="" width="140">
          </colgroup>
          <thead>
            <tr>
              <th class="">
                <div class="cell">日期</div>
              </th>
              <th class="">
                <div class="cell">姓名</div>
              </th>
              <th class="">
                <div class="cell">省份</div>
              </th>
              <th class="">
                <div class="cell">市区</div>
              </th>
              <th class="">
                <div class="cell">地址</div>
              </th>
              <th class="">
                <div class="cell">邮编</div>
              </th>
              <th class="">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="">
                <div class="cell">2016-05-03</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-02</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-04</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-01</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-08</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-06</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-07</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
      <br>
      <h4>表格6:宽度部分（例子是地址，邮箱）自适应，自适应宽度最小默认为100</h4>
      <div class="c-table c-table--border">
        <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table">
          <colgroup>
            <col name="" width="160">
            <col name="" width="130">
            <col name="" width="130">
            <col name="" width="130">
            <col name="" width="">
            <col name="" width="">
            <col name="" width="150">
          </colgroup>
          <thead>
            <tr>
              <th class="">
                <div class="cell">日期</div>
              </th>
              <th class="">
                <div class="cell">姓名</div>
              </th>
              <th class="">
                <div class="cell">省份</div>
              </th>
              <th class="">
                <div class="cell">市区</div>
              </th>
              <th class="">
                <div class="cell">地址</div>
              </th>
              <th class="">
                <div class="cell">邮编</div>
              </th>
              <th class="">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="">
                <div class="cell">2016-05-03</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-02</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-04</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-01</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-08</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-06</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-07</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
      <br>
      <h4>表格7:两级表头，表头不限级数</h4>
      <div class="c-table c-table--border">
        <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table">
          <colgroup>
            <col name="" width="160">
            <col name="" width="130">
            <col name="" width="130">
            <col name="" width="130">
            <col name="" width="">
            <col name="" width="">
            <col name="" width="150">
          </colgroup>
          <thead>
            <tr>
              <th colspan="1" rowspan="2" class="">
                <div class="cell">日期</div>
              </th>
              <th colspan="1" rowspan="2" class="">
                <div class="cell">姓名</div>
              </th>
              <th colspan="3" rowspan="1" class="">
                <div class="cell">地址</div>
              </th>
              <th colspan="1" rowspan="2" class="">
                <div class="cell">邮编</div>
              </th>
              <th colspan="1" rowspan="2" class="">
                <div class="cell">操作</div>
              </th>
            </tr>
            <tr>
              <th class="">
                <div class="cell">省份</div>
              </th>
              <th class="">
                <div class="cell">市区</div>
              </th>
              <th class="">
                <div class="cell">地址</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="">
                <div class="cell">2016-05-03</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-02</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-04</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-01</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-08</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-06</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">2016-05-07</div>
              </td>
              <td class="">
                <div class="cell">王小虎</div>
              </td>
              <td class="">
                <div class="cell">上海</div>
              </td>
              <td class="">
                <div class="cell">普陀区</div>
              </td>
              <td class="">
                <div class="cell">上海市普陀区金沙江路 1518 弄</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
      <br>
      <h4>表格8:排序</h4>
      <div class="c-table c-table--border">
        <table cellspacing="0" cellpadding="0" border="0" role="c-table-sort">
          <colgroup>
            <col name="" width="160" data-sort="true">
            <col name="" width="130" data-sort="up" data-sortconfig="sortSize">
            <col name="" width="130" data-sort="true" data-sortconfig="¥">
            <col name="" width="130" data-sort="true">
            <col name="" width="" data-sort="true">
            <col name="" width="" data-sort="true">
            <col name="" width="150">
          </colgroup>
          <thead>
            <tr>
              <th class="">
                <div class="cell">
                  日期
                </div>
              </th>
              <th class="">
                <div class="cell">
                  流量大小
                </div>
              </th>
              <th class="">
                <div class="cell">金额</div>
              </th>
              <th class="">
                <div class="cell">单价</div>
              </th>
              <th class="">
                <div class="cell">库存</div>
              </th>
              <th class="">
                <div class="cell">售出</div>
              </th>
              <th class="">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-03
                </div>
              </td>
              <td class="">
                <div class="cell">500M</div>
              </td>
              <td class="">
                <div class="cell">¥3.000</div>
              </td>
              <td class="">
                <div class="cell">11</div>
              </td>
              <td class="">
                <div class="cell">200</div>
              </td>
              <td class="">
                <div class="cell">300</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-02
                </div>
              </td>
              <td class="">
                <div class="cell">20M</div>
              </td>
              <td class="">
                <div class="cell">¥10.000</div>
              </td>
              <td class="">
                <div class="cell">500</div>
              </td>
              <td class="">
                <div class="cell">1004</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-04
                </div>
              </td>
              <td class="">
                <div class="cell">50M</div>
              </td>
              <td class="">
                <div class="cell">¥66.000</div>
              </td>
              <td class="">
                <div class="cell">2233</div>
              </td>
              <td class="">
                <div class="cell">9900</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-01
                </div>
              </td>
              <td class="">
                <div class="cell">20M</div>
              </td>
              <td class="">
                <div class="cell">¥30.000</div>
              </td>
              <td class="">
                <div class="cell">455</div>
              </td>
              <td class="">
                <div class="cell">4545</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-08
                </div>
              </td>
              <td class="">
                <div class="cell">10G</div>
              </td>
              <td class="">
                <div class="cell">¥888.000</div>
              </td>
              <td class="">
                <div class="cell">345</div>
              </td>
              <td class="">
                <div class="cell">7655</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-06
                </div>
              </td>
              <td class="">
                <div class="cell">2G</div>
              </td>
              <td class="">
                <div class="cell">¥12.000</div>
              </td>
              <td class="">
                <div class="cell">656</div>
              </td>
              <td class="">
                <div class="cell">3676</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-07
                </div>
              </td>
              <td class="">
                <div class="cell">10M</div>
              </td>
              <td class="">
                <div class="cell">¥8.000</div>
              </td>
              <td class="">
                <div class="cell">346</div>
              </td>
              <td class="">
                <div class="cell">9332</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
      <br>
      <h4>表格9:合计</h4>
      <div class="c-table c-table--border">
        <table cellspacing="0" cellpadding="0" border="0" role="c-table3" data-height="300">
          <colgroup>
            <col name="" width="160">
            <col name="" width="130">
            <col name="" width="130" data-total="true">
            <col name="" width="130" data-total="true">
            <col name="" width="" data-total="true">
            <col name="" width="">
            <col name="" width="150">
          </colgroup>
          <thead>
            <tr>
              <th class="">
                <div class="cell">
                  日期
                </div>
              </th>
              <th class="">
                <div class="cell">
                  数量
                </div>
              </th>
              <th class="">
                <div class="cell">金额</div>
              </th>
              <th class="">
                <div class="cell">单价</div>
              </th>
              <th class="">
                <div class="cell">库存</div>
              </th>
              <th class="">
                <div class="cell">售出</div>
              </th>
              <th class="">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-03
                </div>
              </td>
              <td class="">
                <div class="cell">wwee</div>
              </td>
              <td class="">
                <div class="cell">24566</div>
              </td>
              <td class="">
                <div class="cell">0.1</div>
              </td>
              <td class="">
                <div class="cell">200</div>
              </td>
              <td class="">
                <div class="cell">300</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-02
                </div>
              </td>
              <td class="">
                <div class="cell">rrrr</div>
              </td>
              <td class="">
                <div class="cell">345345435</div>
              </td>
              <td class="">
                <div class="cell">0.1</div>
              </td>
              <td class="">
                <div class="cell">1004</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-04
                </div>
              </td>
              <td class="">
                <div class="cell">trete</div>
              </td>
              <td class="">
                <div class="cell">3234325</div>
              </td>
              <td class="">
                <div class="cell">2233</div>
              </td>
              <td class="">
                <div class="cell">9900</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-01
                </div>
              </td>
              <td class="">
                <div class="cell">erwer</div>
              </td>
              <td class="">
                <div class="cell">167688</div>
              </td>
              <td class="">
                <div class="cell">455</div>
              </td>
              <td class="">
                <div class="cell">4545</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-08
                </div>
              </td>
              <td class="">
                <div class="cell">erewr</div>
              </td>
              <td class="">
                <div class="cell">456584</div>
              </td>
              <td class="">
                <div class="cell">345</div>
              </td>
              <td class="">
                <div class="cell">7655</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-06
                </div>
              </td>
              <td class="">
                <div class="cell">qqwwe</div>
              </td>
              <td class="">
                <div class="cell">9678657</div>
              </td>
              <td class="">
                <div class="cell">656</div>
              </td>
              <td class="">
                <div class="cell">3676</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>
            <tr>
              <td class="">
                <div class="cell">
                  2016-05-07
                </div>
              </td>
              <td class="">
                <div class="cell">iuuuu</div>
              </td>
              <td class="">
                <div class="cell">785</div>
              </td>
              <td class="">
                <div class="cell">346</div>
              </td>
              <td class="">
                <div class="cell">9332</div>
              </td>
              <td class="">
                <div class="cell">200333</div>
              </td>
              <td class="">
                <div class="cell">
                  <button type="button" class="custom-btn primary plain">移除</button>
                </div>
              </td>

            </tr>

          </tbody>
        </table>
      </div>
      <br>
      <h4>表格10:左侧复选框</h4>
      <div class="g-selectAll--main">
        <div class="c-table c-table--border">
          <table cellspacing="0" cellpadding="0" border="0" role="c-table">
            <colgroup>
              <col name="" width="55">
              <col name="" width="130">
              <col name="" width="130">
              <col name="" width="130">
              <col name="" width="">
              <col name="" width="">
              <col name="" width="150">
            </colgroup>
            <thead>
              <tr>
                <th class="">
                  <div class="cell">
                    <div class="checkbox form-checkbox">
                      <input type="checkbox" class="g-selectAll">
                    </div>
                  </div>
                </th>
                <th class="">
                  <div class="cell">姓名</div>
                </th>
                <th class="">
                  <div class="cell">省份</div>
                </th>
                <th class="">
                  <div class="cell">市区</div>
                </th>
                <th class="">
                  <div class="cell">地址</div>
                </th>
                <th class="">
                  <div class="cell">邮编</div>
                </th>
                <th class="">
                  <div class="cell">操作</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="">
                  <div class="cell">
                    <div class="checkbox form-checkbox">
                      <input type="checkbox" class="g-selectAll--input" value="2016-05-03" data-value="1">
                    </div>
                  </div>
                </td>
                <td class="">
                  <div class="cell">王小虎</div>
                </td>
                <td class="">
                  <div class="cell">上海</div>
                </td>
                <td class="">
                  <div class="cell">普陀区</div>
                </td>
                <td class="">
                  <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                </td>
                <td class="">
                  <div class="cell">200333</div>
                </td>
                <td class="">
                  <div class="cell">
                    <button type="button" class="custom-btn primary plain">移除</button>
                  </div>
                </td>

              </tr>
              <tr>
                <td class="">
                  <div class="cell">
                    <div class="checkbox form-checkbox">
                      <input type="checkbox" class="g-selectAll--input" value="2016-05-02" data-value="2">
                    </div>
                  </div>
                </td>
                <td class="">
                  <div class="cell">王小虎</div>
                </td>
                <td class="">
                  <div class="cell">上海</div>
                </td>
                <td class="">
                  <div class="cell">普陀区</div>
                </td>
                <td class="">
                  <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                </td>
                <td class="">
                  <div class="cell">200333</div>
                </td>
                <td class="">
                  <div class="cell">
                    <button type="button" class="custom-btn primary plain">移除</button>
                  </div>
                </td>

              </tr>
              <tr>
                <td class="">
                  <div class="cell">
                    <div class="checkbox form-checkbox">
                      <input type="checkbox" class="g-selectAll--input" value="2016-05-04" data-value="3">
                    </div>
                  </div>
                </td>
                <td class="">
                  <div class="cell">王小虎</div>
                </td>
                <td class="">
                  <div class="cell">上海</div>
                </td>
                <td class="">
                  <div class="cell">普陀区</div>
                </td>
                <td class="">
                  <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                </td>
                <td class="">
                  <div class="cell">200333</div>
                </td>
                <td class="">
                  <div class="cell">
                    <button type="button" class="custom-btn primary plain">移除</button>
                  </div>
                </td>

              </tr>
              <tr>
                <td class="">
                  <div class="cell">
                    <div class="checkbox form-checkbox">
                      <input type="checkbox" class="g-selectAll--input" value="2016-05-01" data-value="4">
                    </div>
                  </div>
                </td>
                <td class="">
                  <div class="cell">王小虎</div>
                </td>
                <td class="">
                  <div class="cell">上海</div>
                </td>
                <td class="">
                  <div class="cell">普陀区</div>
                </td>
                <td class="">
                  <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                </td>
                <td class="">
                  <div class="cell">200333</div>
                </td>
                <td class="">
                  <div class="cell">
                    <button type="button" class="custom-btn primary plain">移除</button>
                  </div>
                </td>

              </tr>
              <tr>
                <td class="">
                  <div class="cell">
                    <div class="checkbox form-checkbox">
                      <input type="checkbox" class="g-selectAll--input" value="2016-05-08" data-value="5">
                    </div>
                  </div>
                </td>
                <td class="">
                  <div class="cell">王小虎</div>
                </td>
                <td class="">
                  <div class="cell">上海</div>
                </td>
                <td class="">
                  <div class="cell">普陀区</div>
                </td>
                <td class="">
                  <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                </td>
                <td class="">
                  <div class="cell">200333</div>
                </td>
                <td class="">
                  <div class="cell">
                    <button type="button" class="custom-btn primary plain">移除</button>
                  </div>
                </td>

              </tr>
              <tr>
                <td class="">
                  <div class="cell">
                    <div class="checkbox form-checkbox">
                      <input type="checkbox" class="g-selectAll--input" value="2016-05-06" data-value="6">
                    </div>
                  </div>
                </td>
                <td class="">
                  <div class="cell">王小虎</div>
                </td>
                <td class="">
                  <div class="cell">上海</div>
                </td>
                <td class="">
                  <div class="cell">普陀区</div>
                </td>
                <td class="">
                  <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                </td>
                <td class="">
                  <div class="cell">200333</div>
                </td>
                <td class="">
                  <div class="cell">
                    <button type="button" class="custom-btn primary plain">移除</button>
                  </div>
                </td>

              </tr>
              <tr>
                <td class="">
                  <div class="cell">
                    <div class="checkbox form-checkbox">
                      <input type="checkbox" class="g-selectAll--input" value="2016-05-07" data-value="8">
                    </div>
                  </div>
                </td>
                <td class="">
                  <div class="cell">王小虎</div>
                </td>
                <td class="">
                  <div class="cell">上海</div>
                </td>
                <td class="">
                  <div class="cell">普陀区</div>
                </td>
                <td class="">
                  <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                </td>
                <td class="">
                  <div class="cell">200333</div>
                </td>
                <td class="">
                  <div class="cell">
                    <button type="button" class="custom-btn primary plain">移除</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <br>
        <div>
          <button class="custom-btn primary plain" href="javascript:;" data-tag="Off">点我点我</button>
        </div>
      </div>
    </div>

    <div>
      <h3>jqTable</h3>

      <p style="margin-top: 20px;"><strong>类名介绍</strong></p>
      <div class="c-table">
        <table cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr class="">
              <th>
                <div class="cell">类名</div>
              </th>
              <th>
                <div class="cell">作用</div>
              </th>
            </tr>
            <tr>
              <td>
                <div class="cell">c-table-border</div>
              </td>
              <td>
                <div class="cell">添加边框</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">c-table--noWrap</div>c-table--noWrap
              </td>
              <td>
                <div class="cell">不换行</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">c-table--striped</div>
              </td>
              <td>
                <div class="cell">斑马线表格</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">g-selectAll--main</div>
              </td>
              <td>
                <div class="cell">复选框选择父元素</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">input type="checkbox" class="g-selectAll"</div>
              </td>
              <td>
                <div class="cell">复选框选择全部</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">input type="checkbox" class="g-selectAll--input"</div>
              </td>
              <td>
                <div class="cell">复选框选择单个</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">class="g-selectAll--btn" data-tag="select"</div>
              </td>
              <td>
                <div class="cell">复选框按钮，点击在回调中获取选中值的具体信息json</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">g-toggleTable--main</div>
              </td>
              <td>
                <div class="cell">展开收起父元素</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">tr.g-toggleTable--title&gt;th i.g-toggleTable--buttonAll</div>
              </td>
              <td>
                <div class="cell">操作头-全部切换部分</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">tr.g-toggleTable--title&gt;th i.g-toggleTable--button</div>
              </td>
              <td>
                <div class="cell">操作头-单个切换部分</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">col data-total="true"</div>
              </td>
              <td>
                <div class="cell">计算总数</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">col data-sort="true"</div>
              </td>
              <td>
                <div class="cell">添加排序</div>
              </td>
            </tr>
          </thead>
        </table>
      </div>

      <p style="margin-top: 20px;"><strong>参数介绍</strong></p>
      <div class="c-table c-table-border">
        <table cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr class="">
              <th>
                <div class="cell">参数名</div>
              </th>
              <th>
                <div class="cell">默认值（可选值）</div>
              </th>
              <th>
                <div class="cell">作用</div>
              </th>
              <th>
                <div class="cell">类型</div>
              </th>
            </tr>
            <tr>
              <td>
                <div class="cell">fixedLeft</div>
              </td>
              <td>
                <div class="cell">false</div>
              </td>
              <td>
                <div class="cell">左边固定</div>
              </td>
              <td>
                <div class="cell">boolean</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">fixedRight</div>
              </td>
              <td>
                <div class="cell">false</div>
              </td>
              <td>
                <div class="cell">右边固定</div>
              </td>
              <td>
                <div class="cell">boolean</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">fixedMinWidth</div>
              </td>
              <td>
                <div class="cell">100</div>
              </td>
              <td>
                <div class="cell">最小宽度</div>
              </td>
              <td>
                <div class="cell">number</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">totalString</div>
              </td>
              <td>
                <div class="cell">'--'</div>
              </td>
              <td>
                <div class="cell">计算列总数</div>
              </td>
              <td>
                <div class="cell">string</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">totalTitle</div>
              </td>
              <td>
                <div class="cell">'总计'</div>
              </td>
              <td>
                <div class="cell">总数的标题</div>
              </td>
              <td>
                <div class="cell">string</div>
              </td>
            </tr>
          </thead>
        </table>
      </div>


      <p style="margin-top: 20px;"><strong>隐藏参数介绍</strong></p>
      <table class="c-table c-table-border">
        <tbody>
          <tr class="">
            <th>
              <div class="cell">参数名</div>
            </th>
            <th>
              <div class="cell">作用</div>
            </th>
            <th>
              <div class="cell">类型</div>
            </th>
          </tr>
          <tr>
            <td>
              <div class="cell">data-total="true"</div>
            </td>
            <td>
              <div class="cell">开启这一列计算总数功能</div>
            </td>
            <td>
              <div class="cell">boolean</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="cell">data-sort="true"</div>
            </td>
            <td>
              <div class="cell">开启这一列的排序功能</div>
            </td>
            <td>
              <div class="cell">boolean</div>
            </td>
          </tr>
        </tbody>
      </table>

      <h3 style="margin-top: 20px;">调用举例</h3>
      <a href="https://www.jq22.com/jquery-info17083" target="_blank">调用举例</a>

      <p style="margin-top: 20px;"><strong>JS:</strong></p>
      <div>
        <div id="highlighter_638151" class="syntaxhighlighter  js">
          $('[role="c-table"]').jqTable();
        </div>
      </div>

      <h4 style="margin-top: 20px;">例子中用到的JS说明</h4>
      <p><strong>jqTable js</strong></p>
      <div>
        <p>// 分开引入</p>
        <p>js/jqTable.js&nbsp;:&nbsp;主要代码，一定要引入的</p>
        <p>js/jqTablePlugins.js&nbsp;:&nbsp;包含展开收起、复选框的选择的代码（可选择性引入）</p>
        <p>// 总代码</p>
        <p>js/jqTable.all.js&nbsp;主要代码+展开收起、复选框的选择</p>
        <p>//&nbsp;压缩后的代码</p>
        <p>js/zipJs/</p>
      </div>
    </div>

  </div>
  <!-- 模版 -->
  <script id="table-tpl" type="text/html">
      <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table4">
        <colgroup>
          <col name="" width="260">
          <col name="" width="60">
          <col name="" width="">
          <col name="" width="">
          <col name="" width="">
          <col name="" width="">
          <col name="" width="140">
        </colgroup>
        <thead>
          <tr class="g-toggleTable--title">
            <th class="">
              <div class="cell"><i class="iconfont icon-right text-muted mr10 g-toggleTable--buttonAll" aria-hidden="true"></i>名称</div>
            </th>
            <th class="">
              <div class="cell">Id</div>
            </th>
            <th>
              <div clas>速率</div>
            </th>
            <th>
              <div clas>累计数量</div>
            </th>
            <th>
              <div clas>今日数量</div>
            </th>
            <th>
              <div clas>小时量</div>
            </th>
            <th>
              <div clas>剩余价值</div>
            </th>
          </tr>
        </thead>
        <tbody>
          {{each data}}
          <tr class="c-table__row c-table__row-{{$index}} g-toggleTable--title">
            
            <td class="">
              <div class="cell"><i class="iconfont icon-right text-muted mr10 g-toggleTable--button" aria-hidden="true"></i> {{$value.name}}</div>
            </td>
            <td class="">
              <div class="cell">{{$value.channelId}}</div>
            </td>
            <td>
              <div class="cell">{{$value.sendRate | toFixed}}</div>
            </td>
            <td>
              <div class="cell">{{$value.totalSend | toFixed}}</div>
            </td>
            <td>
              <div class="cell">{{$value.daySend | toFixed}}</div>
            </td>
            <td>
              <div class="cell">{{$value.hourSend | toFixed}}</div>
            </td>
            <td>
              <div class="cell">{{$value.balance | toFixed}}</div>
            </td>
          </tr>
          {{each $value.senderStatus child i}}
              {{if ($value.senderStatus.length-1)==i}}
              <tr class="c-table__row c-table__row-{{$index}} c-table__child c-table__child-default hide">
              {{else}}
              <tr class="c-table__row c-table__row-{{$index}} c-table__child c-table__child-default c-table__child-border hide">
              {{/if}}
              <td class="">
                <div class="cell">&nbsp;</div>
              </td>
              <td class="">
                <div class="cell">&nbsp;</div>
              </td>
              <td>
                <div class="cell">{{child.sendRate | toFixed}}</div>
              </td>
              <td>
                <div class="cell">{{child.totalSend | toFixed}}</div>
              </td>
              <td>
                <div class="cell">{{child.daySend | toFixed}}</div>
              </td>
              <td>
                <div class="cell">{{child.hourSend | toFixed}}</div>
              </td>
              <td>
                <div class="cell">&nbsp;</div>
              </td>
            </tr>
          {{/each}}
          {{/each}}

        </tbody>
      </table>
    </script>
  <!-- 模版2 -->
  <script id="table-tpl2" type="text/html">
      <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table" data-height="200">
        <colgroup>
          <col name="" width="150">
          <col name="" width="120">
          <col name="" width="120">
          <col name="" width="120">
          <col name="" width="300">
          <col name="" width="120">
          <col name="" width="140">
        </colgroup>
        <thead>
          <tr>
            <th class="">
              <div class="cell">日期</div>
            </th>
            <th class="">
              <div class="cell">姓名</div>
            </th>
            <th class="">
              <div class="cell">省份</div>
            </th>
            <th class="">
              <div class="cell">市区</div>
            </th>
            <th class="">
              <div class="cell">地址</div>
            </th>
            <th class="">
              <div class="cell">邮编</div>
            </th>
            <th class="">
              <div class="cell">操作</div>
            </th>
          </tr>
        </thead>
        <tbody>
          {{each data}}
              <tr>
                <td class="">
                  <div class="cell">{{$value.time}}</div>
                </td>
                <td class="">
                  <div class="cell">{{$value.name}}</div>
                </td>
                <td class="">
                  <div class="cell">{{$value.province}}</div>
                </td>
                <td class="">
                  <div class="cell">{{$value.city}}</div>
                </td>
                <td class="">
                  <div class="cell">{{$value.address}}</div>
                </td>
                <td class="">
                  <div class="cell">{{$value.code}}</div>
                </td>
                <td class="">
                  <div class="cell">
                    <button type="button" class="custom-btn primary plain">移除</button>
                  </div>
                </td>
              </tr>
          {{/each}}
          
        </tbody>
      </table>
    </script>
  <!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
  <script src="../js/jquery.min.js"></script>
  <!--开源模版引擎： art-template@4.12.2 for browser | https://github.com/aui/art-template  -->
  <script src="../js/jqTable/js/plugins/artTemplate.js"></script>
  <!--另一个插件，消息提示插件  -->
  <script src="../js/jqTable/js/plugins/message.js"></script>
  <!-- 必要插件：固定列滚动需要用到，鼠标滚动兼容多浏览器 -->
  <script src="../js/jqTable/js/jquery.mousewheel.min.js"></script>
  <!-- 总引入  -->
  <script src="../js/jqTable/js/zipJs/jqTable.all.min.js"></script>

  <!-- 也可分开引入  -->
  <!-- <script src="../js/jqTable/js/jqTable.all.js"></script>
  <script src="../js/jqTable/js/jqTablePlugins.js"></script>
  <script src="../js/jqTable/js/jqTable.js"></script> -->
  <!-- 临时用的json -->
  <script src="../js/jqTable/js/json.js"></script>
  <script type="text/javascript">
    $(function () {
      $('[role="c-table2"]').jqTable({
        fixedRight: true
      });
      // 固定多列
      $('[role="c-table1"]').jqTable({
        fixedLeft: 0,
        fixedRight: 1
      });

      $('[role="c-table"]').jqTable({
        fixedLeft: true,
        fixedRight: true
      });


      $('[role="c-table3"]').jqTable({
        totalString: '--',
        totalTitle: '总计'
      });

      // artTemplate注册过滤器：三位小数
      template.defaults.imports.toFixed = function (data, num) {
        data = data ? data : 0;
        if (data == 0) {
          return 0;
        }
        return Number(data).toFixed(num || 3);
      };

      // 表格1:修改高度值
      setTimeout(function () {
        $('.J-table-height').data('height', 300);
        $(window).trigger('resize');
      }, 5000);
      // 表格1:更新数据距离
      setTimeout(function () {
        var html2 = template('table-tpl2', { data: json2 });
        $('.c-table').eq(0).data('table').updateHtml(html2);
      }, 8000);

      // 表格10:输出选中值
      $.sub('GSelectAllSuccessOff', function (event, params) {
        alert('选中' + params.checked.length + '个，具体数据看控制台');
        console.info('选中值json', params)
      });

      // 表格2渲染html
      var html = template('table-tpl', { data: json });
      $('.J-table').append(html);

      // 表格2调用
      $('[role="c-table4"]').jqTable({
        fixedMinWidth: 140
      });

      // 排序表格
      $('[role="c-table-sort"]').jqTable({
        fixedLeft: true,
        fixedRight: true,
        handleSortData: {
          sortSize: sortSize
        }
      });
      function sortSize(data) {
        var result = [];
        var _data, _value;
        for (var i = 0; i < data.length; i++) {
          _data = data[i];
          _value = _data.value;
          _data.value = _value.indexOf('M') !== -1 ? removeUtil(_value, 'M') : _value.indexOf('G') !== -1 ? removeUtil(_value, 'G') * 1024 : _value;
          result.push(_data);
        }
        return result;
      }
      function removeUtil(data, str) {
        return data.replace(new RegExp(str, 'gi'), '');
      }
    });
  </script>
</body>

</html>